<template>
	<div>
		<view class="uni-common-mt" style="min-width:550upx;">
			<view class="uni-form-item uni-column">
				<view class="title">账号：</view>
				<input class="uni-input border" type="idcard" placeholder="请输入账号" v-model="formData.phone"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">请输入密码：</view>
				<view class="with-fun border">
					<input class="uni-input" style="border-radius: 10px;" placeholder="请输入密码" :password="showPassword" v-model="formData.password"/>
					<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
				</view>
			</view>
			<label>勾选得星座：</label>
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in optionList1" :key="item.id">
						<view>
							<checkbox :value="item.name" :checked="item.checked" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</checkbox-group>
			</view>
			<view class="button-sp-area">
				<button type="primary" plain="true" @click="loginClickHandle">登录并添加</button>
			</view>
			
		</view>
	</div>
</template>

<script>
	import api from "../../../api/api.js"
	export default {
		props: {
			optionList: {type: Array},
			userInfo: {type: Object}
		},
		data() {
			return {
				showPassword: true,
				starList: [],
				formData: {},
				optionList1: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.formData = {...this.userInfo}
				this.optionList1 = this.optionList.map(o => ({...o}))
				if (this.formData.phone) {
					this.optionList1.map((starInfo, index) => {
						const tempStarInfo = this.formData.option.find(starName => starName === starInfo.name)
						console.log("starInfo", tempStarInfo)
						if (tempStarInfo) {
							this.$set(starInfo, "checked", true)
							console.log(starInfo.checked)
						}
					})
				}
			},
			getTime() {
				return "0"
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			checkboxChange: function (e) {
				console.log(e.detail.value)
				var items = this.optionList1,
					values = e.detail.value;
				this.formData.option = e.detail.value;
				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if(values.includes(item.value)){
				// 		this.$set(item,'checked',true)
				// 	}else{
				// 		this.$set(item,'checked',false)
				// 	}
				// }
			},
			loginClickHandle() {
				uni.showLoading({
				    title: '加载中'
				});
				console.log(11111)
				api.loginApi(this.formData.phone, this.formData.password).then(res => {
					uni.showToast({
					    title: res.msg,
					    duration: 2000
					});
					if (res.code === 0) {
						this.formData.token = res.data.token
						this.formData.status = "已登录"
						this.cycleGetUserInfo(this.formData.token)
					}
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
					    title: "网络错误",
					    duration: 2000
					});
				})
			},
			cycleGetUserInfo(token) {
				api.getUserInfoApi(token).then(userInfo => {
					this.formData.realname = userInfo.realname
					this.cycleGetStarInfo(token)
				}).catch(e => {
					this.cycleGetUserInfo(token)
				})
			},
			cycleGetStarInfo(token) {
				api.getStarInfoApi(this.formData.token).then(starInfo => {
					const preBuyList = []
					starInfo.data.cat.map(item => {
						if (item.cat_status.status === 1) {
							preBuyList.push(item.name)
						}
					})
					this.formData.preBuyList = preBuyList
					this.cycleGetSuccessStar(token)
				}).catch(e => {
					this.cycleGetStarInfo(token)
				})
			},
			cycleGetSuccessStar(token) {
				api.getSuccessStar(token).then(sucStar => {
					if (sucStar.data.code === 0 && sucStar.data.data.data) {
						const successStar = []
						sucStar.data.data.data.map(item => {
							const star = this.optionList1.find(star => star.id === item.cat_id)
							successStar.push(star.name)
						})
						uni.hideLoading()
						this.formData.successStar = successStar
						this.$emit("sendComEditAccount", this.formData)
					}
				}).catch(e => {
					this.cycleGetSuccessStar(token)
				})
			}
		}
	}
</script>

<style>
	.border{
		border: 1px solid #10AEFF;
		border-radius: 5px;
		z-index: 999;
	}
</style>
